<template>
  <div class="x-bar" :id="chartId" :option="option"></div>
</template>

<script>
import { formatNum } from "../util/tool";
export default {
  props: {
    chartId: {
      type: String
    },
    options: {
      type: Object
    }
  },
  data() {
    return {
      chart: "",
      option: {
        color: [
          "#00ff42",
          "#ffff00",
          "#ff0000",
          "#ff00ff"
        ],
        legend: {
          orient: 'vertical',
          x: 'right',
          icon: 'circle',
          itemWidth: 10,
          textStyle: {
            color: "#dedede",
            fontSize: 12
          },
          padding: 8,
          data: this.options.legend
        },
        grid: {
          top: '0',
          left: '0',
          right: '0',
          bottom: '0'
        },
        tooltip: {
          padding: [10, 12],
          align: 'center',
          backgroundColor: 'rgba(0,0,0,.8)',
          formatter: function(param){
            let valObj = param.data;
            let color = ['#00ff42','#ffc000','#ff0000','#ff00ff'];
            let val = ['阳东区','阳西区','江城区','阳春市'];
            let label = '<p style="color: #00ffff; font-size: 14px;text-align: center;height: 8px">'+ valObj.name + '</p>';
            for(let i = 0; i< val.length;i++) {
              label += '<br />' + '<i style="display: inline-block;width: 6px;height:6px;border-radius: 50%;margin-right:8px;vertical-align: middle;background-color:'+color[i]+'"></i>' + val[i] + '：' + valObj.value[i];
            }
            return label
          }
        },
        radar: {
          radius: '80%',
          name: {
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#004568'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#004568'
            }
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          },
          indicator: this.options.indicator
        },
        series: [
          {
            type: "radar",
            areaStyle: {
              normal: {
                opacity: '0.2'
              }
            },
            data: this.options.sData,
          }
        ]
      }
    };
  },
  watch: {
    options: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.option.legend.data = newVal.legend;
            this.option.radar.indicator = newVal.indicator;
            this.option.series[0].data = newVal.sData;
            this.chart.setOption(this.option);
          } else {
            this.chart.setOption(this.option);
          }
        } else {
          this.init();
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
.x-bar {
  width: 100%;
  height: 88%;
}
</style>
